<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作 （四种方式10个属性） 
		1.控制字体：font-family(重)、font-size(重)、font-weight
		2.控制文本布局：text-aglin(必)、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器{
				        属性：   属性值;
						属性：   属性值;
						属性：   属性值; 
						.......
			                  }
							叫法：一个样式
			*/
			bod y div#d1{/*通过加权方式，锁定元素     权值：102*/
				color: #ffff00;
				/* 知识点1：文本格式化属性控制字体
				font-family：字体家族，指定字体形式
				*/
				font-family: 华文彩云,sans-serif;
				/* 设置多个字体：浏览器会按照顺序寻找可用字体
				用户体验，用户系统有什么字体，优先指定字体
				通常与通配选择器使用   *{}
				*/
			   /* 知识点2：文本格式化属性控制字体
			   font-size：字体大小属性，与单位共存
			   单位：px 像素   使用特点：绝对值、PC端
			        em   相对单位，理解：倍数
					            使用特点：相对与父元素按照倍数方式、移动端
			   */
			  /* 知识点3：文本格式化属性控制字体
			  font-weight：字体粗细属性，不存在单位
			             属性值：数值【100 200 300  ... 900】
						 常用数值：400
						        单词【400==normal、bold、light】
								使用方法：统配选择器搭配使用，指定全局字体正常字体粗细
			  */
			 font-weight: 900;
			  font-size: 2em;
			  /*补充：1.英文大写；2.首字母大写；3.段落开始间距200px*/
			  text-transform: uppercase;
			  text-transform: capitalize;
			  text-indent: 200px;
			}
			
			div#d1{/*通过加权方式，锁定元素     权值：101*/
				color: #ff5500;
				/* 知识点4：文本格式化属性控制文本格式[对齐、间隙]
				text-align：文本对齐属性
				left|right|center|justify：两端对齐,用于弹性布局
				*/
			   text-align: justify;
			   /*
			   知识点5：文本格式化属性控制文本格式[对齐、间隙]
			   行高属性line-height:文本垂直效果
			   使用方式：1.高度属性：属性值一致
			            2.在高度属性上加行高属性：属性值一致
			   */
			  border: 1px solid red;
			  height: 100px;
			  line-height: 100px;
			  /*补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
			  /*知识点6：：letter-spacing设置字符之间间隙
			    知识点7：word-spacing：设置单词之间间隙
			  */
			 le tter-spacing:10px;
			 word-spacing: 10px;
			}
			
			#d1{/* 权值：100*/
			color: #00aaff;
			}
			
			a.c1{/*权值：11*/
				/*知识点8：text-decoration  修饰超链接样式
				使用方法：与通配符一起使用，设置全局页面超链接样式
				属性值：none|underline|line-through
				*/
			   text-decoration:line-through ;
			   
			   /*知识点9：text-shadow  修饰文本阴影
			     属性值：X轴  Y轴  blur模糊距离  color
			   */
			  text-shadow: 5px 5px 5px #ff0;
			}
			p{
				border: 1px solid red;
				/*知识点10：文本换行效果
				white-space：文本换行属性
				属性值：
			nowrap  不换行,只显示一行，超出部分隐藏e'h'd
			|pre  保存空格和回车|normal 默认，空格合并，换行隐藏
				*/
			   white-space: nowrap;
			   overflow:hidden;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 需求；创建div同时指定别名，添加假文【tab】 
		          id选择器，通过加权找到div，添加颜色
		 -->
		 
		 <div id="d1">
			 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, possimus consequatur recusandae facere nisi error reprehenderit, modi voluptas, amet ad hic sit. At molestiae voluptatem, amet quibusdam eos nemo et?
			 </div>
			 <hr>
			 <h4>文本修饰效果</h4>
			 <!-- 文本修饰相关属性
			  知识点7：text-decoration属性：设置超链接效果
			  -->
			 <a class="c1" href="http://www.tsgzy.edu.cn">实现跳转 【方式：6种】</a>
			 <div style="height: 800px;"></div>
			 <marquee>
				 <h4>处理文本效果</h4>
			 </marquee>
			 <p>Lorem 
			 ipsu  m dolor sit, amet consectetur 
			 adipisicing eli  t. Doloribus sed expedita
			  fugit sequi. Iure, dolo  re et! Animi quo iste alias?
			   Dolore voluptatum assumenda
				sed, tempo  ibus vero odio natus eos facere!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus sed expedita fugit sequi. Iure, dolore et! Animi quo iste alias? Dolore voluptatum assumenda sed, temporibus vero odio natus eos facere!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus sed expedita fugit sequi. Iure, dolore et! Animi quo iste alias? Dolore voluptatum assumenda sed, temporibus vero odio natus eos facere!</p>
				 </body>
</html>